<template>
<div class="w-full h-full">
  <el-tree
      highlight-current
      :expand-on-click-node="false"
      default-expand-all
      node-key="orgId"
      :show-checkbox="props.showCheckbox"
      :check-strictly="props.checkStrictly"
      @check-change="checkChangeHandler"
      @node-click="nodeClickHandler"
      :props="{
         label: 'orgName',
         children: 'children'
       }"
      :data="orgTree"
      ref="treeRef"
  >
    <template #default="{ node, data }">
      <BaseIcon v-if="data.type==1" icon="bjx-gongsi" class="mr-1.5"></BaseIcon>
      <BaseIcon v-else icon="bjx-bumenguanli" class="mr-1.5"></BaseIcon>
      <span class="custom-tree-node">
            <span>{{ node.label }}</span>
          </span>
    </template>
  </el-tree>
</div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {OrgModel} from "/@/api/system/model/OrgModel";
import {listTreeOrg} from "/@/api/system/OrgApi";
const props = defineProps({
  showCheckbox: {
    type: Boolean,
    default: false
  } ,
  checkStrictly:{
    type: Boolean,
    default: false
  }
})
const treeRef = ref()
const orgTree = ref<OrgModel[]>([])
const emit = defineEmits(['nodeClick','checkChange'])
/**
 * 加载组织机构
 */
const orgTreeLoad = async () => {
  let res = await listTreeOrg({orgId: '0', isCompany: false})
  orgTree.value = res
  if(res && res.length > 0){
    emit('nodeClick',res[0].orgId,res[0])
  }
}
const nodeClickHandler = (data: OrgModel) => {
  emit('nodeClick',data.orgId,data)
}
const checkChangeHandler = (data: OrgModel,isNodeSelect: boolean,isSonNodeSelect: boolean) => {
  emit('checkChange',data,isNodeSelect,isSonNodeSelect)
}
onMounted(()=>{
  orgTreeLoad()
})
const setCurrentKey = (orgId: string) => {
  treeRef.value.setCurrentKey(orgId+'')
  emit('nodeClick',orgId)
}
const getCheckedKeys = (keys) => {
  treeRef.value.setCheckedKeys(keys)

}
defineExpose({setCurrentKey,getCheckedKeys})
</script>

<style scoped>

</style>